import React, { Component } from 'react'
import { View,ScrollView, Text, Image } from 'react-native'
import commonStyle from '../../../../libs/commonStyle'
import Iconfont from '../../../../components/iconfont'
import TableHead from '../../../../components/tableHead/index'
import { recruitTableHeadList } from '../data'
import API from '../../../../api/request'
import {deviceHeightDp} from '../../../../libs/pxToDp'

export default class TabRecruitIncome extends Component {
	constructor(props) {
		super(props)
		this.state = {
			statList: [
				{
					title: '收徒奖励',
					type: 'expandSubAward',
					amount: '0.00'
				},
				{
					title: '可提现金额',
					type: 'canUseApprenticeAward',
					amount: '0.00'
				},
				{
					title: '冻结金额',
					type: 'freeze',
					amount: '0.00'
				}
			],
			list: [],
			apprenticeRegister: '',

			tableHeadList: recruitTableHeadList
		}
	}
	componentDidMount() {
		this.apiData()
	}
	async apiData() {
		let url = '/api/user/expand_sub_award/'
		let res = await API.post(url)
		let data = res.data
		let { statList } = this.state
		if (res && res.code === '200') {
			statList.map((item, index) => {
				if (data[item.type]) {
					statList[index].amount = data[item.type]
				}
			})
			this.setState({
				statList,
				apprenticeRegister: data && data.apprenticeRegister || 5,
				list: (data && data.expandSubAwardList) || []
			})
		}
	}
	filterTime (str) {
		return str && str.substring(0, str.length - 3)
	}
	render() {
		const { statList, tableHeadList, list, apprenticeRegister } = this.state
		return (
			<ScrollView style={{height: deviceHeightDp*0.51}}>
				<View style={[commonStyle.flexCenter, commonStyle.p20, commonStyle.pt30]}>
					<Text style={[commonStyle.f26, commonStyle.mb30]}>
						您邀请的好友注册后，您会获得{apprenticeRegister}元奖励金。一开始是冻结状态，当好友首次提现（即成为有效徒弟），该奖励可提现
					</Text>
					<View style={[commonStyle.flexRow, commonStyle.border]}>
						{statList.map((item, index) => {
							return (
								<View
									key={item.type}
									style={[
										commonStyle.p30,
										commonStyle.flexItem,
										commonStyle.flexCenter,
										index < 2
											? commonStyle.borderRight
											: ''
									]}
								>
									<Text
										style={[
											commonStyle.f24,
											{ color: '#444' }
										]}
									>
										{item.title}
									</Text>
									<View
										style={[
											commonStyle.flexRow,
											commonStyle.mt20,
											commonStyle.flexVerticalCenter
										]}
									>
										<Iconfont
											name="money4"
											size={10}
											color="#666"
										/>
										<Text
											style={[
												commonStyle.f36,
												commonStyle.fontBold,
												commonStyle.ml10
											]}
										>
											{item.amount}
										</Text>
									</View>
								</View>
							)
						})}
					</View>
				</View>
				<View style={[commonStyle.p20]}>
					<Text style={[commonStyle.mb20, commonStyle.f26]}>收徒奖励详情</Text>
					<TableHead list={tableHeadList} />
					{list.map((item, index) => {
						return (
							<View
								style={[
									commonStyle.flexRow,
									commonStyle.p20,
									commonStyle.flexVerticalCenter,
									commonStyle.borderBottom
								]}
							>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[0].flex }]}>
									<Text style={[commonStyle.f22]}>
										{this.filterTime(item.registerDate)}
									</Text>
								</View>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[1].flex }]}>
									<Image
										style={[
											commonStyle.w50,
											commonStyle.h50,
											commonStyle.circle30
										]}
										source={{
											uri: item.headPortraitUrl
										}}
									/>
									<Text style={[commonStyle.f22]}>
										{item.userId}/{item.nickname}
									</Text>
								</View>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[2].flex }]}>
										<Text style={[commonStyle.f22]}>
										  {item.award}
										</Text>
								</View>
								<View style={[commonStyle.flexCenter, { flex: tableHeadList[3].flex }]}>
									<Text style={[commonStyle.f22]}>
										{item.fundStatus}
									</Text>
								</View>
							</View>
						)
					})}
				</View>
			</ScrollView>
		)
	}
}
